<template>
  <div id="app">
    <Tou></Tou>
    <div class="menu">
      <div class="menu_1">
        <span class="menu_2">核对订单页</span>
        <span class="menu_3"></span>
        <span class="menu_4"></span>
      </div>
    </div>
    <div class="ding">
      <div class="ding_1">配送至</div>
      <ul class="ding_2">
        <li
          class="ding_2_1"
          :class="{ selected: selectedIndex === index }"
          @click="selectItem(index, dz.dz_id)"
          style="padding: 10px"
          v-for="(dz, index) in dz_es"
          :key="dz.dz_id"
        >
          <table cellpadding="0" cellspacing="0">
            <tbody>
              <tr>
                <th style="width: 228px; height: 26px">{{ dz.dz_ip }}</th>
                <th style="text-align: right">
                  <el-button
                    style="width: 66px"
                    @click="getDzId(dz), (dialogFormVisible2 = true)"
                  >
                    修改
                  </el-button>
                </th>
              </tr>
              <tr>
                <td style="height: 39px; color: #666">
                  {{ dz.dz_xxip }}
                </td>
              </tr>
              <tr>
                <td>{{ dz.dz_name }}</td>
                <td>{{ dz.dz_phone }}</td>
              </tr>
            </tbody>
          </table>
        </li>
        <li class="ding_2_1" style="padding: 50px 100px">
          <el-button style="height: 55px" @click="dialogFormVisible = true"
            >+ 新建收货地址</el-button
          >
          <!-- 添加 -->
          <el-dialog
            style="width: 526px; margin: auto"
            title="添加收货地址"
            v-model="dialogFormVisible"
          >
            <el-form>
              <el-input placeholder="姓名" v-model="dz.dz_name"></el-input>
              <hr />
              <el-input placeholder="手机号" v-model="dz.dz_phone"></el-input>
              <hr />
              <el-input
                placeholder="选择省/市/区/街道"
                v-model="dz.dz_ip"
              ></el-input>
              <hr />
              <el-input
                type="textarea"
                placeholder="详细地址"
                v-model="dz.dz_xxip"
              ></el-input>
              <hr />
              <el-input type="hidden" v-model="dz.dz_qq"></el-input>
            </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button @click="dialogFormVisible = false">取 消</el-button>
              <el-button
                type="danger"
                @click="add(), (dialogFormVisible = false)"
                >确 定</el-button
              >
            </div>
          </el-dialog>

          <!-- 修改 -->
          <el-dialog
            style="width: 526px; margin: auto"
            title="修改收货地址"
            v-model="dialogFormVisible2"
          >
            <el-form>
              <el-input placeholder="姓名" v-model="dz.dz_name"></el-input>
              <hr />
              <el-input placeholder="手机号" v-model="dz.dz_phone"></el-input>
              <hr />
              <el-input
                placeholder="选择省/市/区/街道"
                v-model="dz.dz_ip"
              ></el-input>
              <hr />
              <el-input
                type="textarea"
                placeholder="详细地址"
                v-model="dz.dz_xxip"
              ></el-input>
            </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button @click="dialogFormVisible2 = false">取 消</el-button>
              <el-button
                type="danger"
                @click="DzUpdate(), (dialogFormVisible2 = false)"
                >确 定</el-button
              >
            </div>
          </el-dialog>
        </li>
      </ul>
      <div class="ding_1">支付及快递</div>
      <div class="ding_3">
        <div class="ding_3_1">
          <span>在线支付：</span>
          <div
            @click="
              (ding_3_1_2Click = !ding_3_1_2Click),
                (ding_3_1_3Click = !ding_3_1_3Click)
            "
            :class="ding_3_1_2Click ? 'selected' : ''"
          >
            <img src="../assets/image/wx.jpg" style="width: 160px" />
          </div>
          <div
            @click="
              (ding_3_1_3Click = !ding_3_1_3Click),
                (ding_3_1_2Click = !ding_3_1_2Click)
            "
            :class="ding_3_1_3Click ? 'selected' : ''"
          >
            <img
              src="../assets/image/zfb.webp"
              style="width: 150px; height: 53px"
            />
          </div>
        </div>
      </div>
      <div class="ding_3">
        <div class="ding_3_1">
          <span>快递方式：</span>
          <div class="selected">
            <img src="../assets/image/shunfeng.jpg" width="160px" />
          </div>
          <span>若不在服务范围，我们将为您发邮政快递</span>
          <span style="margin-left: 30px; color: brown; font-weight: bolder"
            >包邮</span
          >
        </div>
      </div>
      <div class="ding_3">
        <div class="ding_3_1">
          <span>收货时间：</span>
          <div
            @click="
              (ding_3_1_4Click = !ding_3_1_4Click),
                (ding_3_1_5Click = !ding_3_1_5Click)
            "
            :class="ding_3_1_4Click ? 'selected' : ''"
          >
            周一至周日
          </div>
          <div
            @click="
              (ding_3_1_5Click = !ding_3_1_5Click),
                (ding_3_1_4Click = !ding_3_1_4Click)
            "
            :class="ding_3_1_5Click ? 'selected' : ''"
          >
            周一至周日
          </div>
        </div>
      </div>
      <div class="ding_1">商品信息</div>
      <table class="ding_4" cellpadding="0" cellspacing="0">
        <tbody>
          <tr>
            <th>商品</th>
            <td>&nbsp;</td>
            <th></th>
            <th></th>
          </tr>
          <tr style="height: 88px" v-for="(item, index) in gwc" :key="item.gid">
            <td>
              <img :src="getAssetsFile(item.gimg)" style="width: 46px" />
              <span>{{ item.gname }}</span>
            </td>
            <td></td>
            <td>{{ item.gprice }}元 × {{ item.gnum }}</td>
            <td style="color: #a01f23; font-weight: bolder">
              {{ item.gprice * item.gnum }}元
            </td>
          </tr>
          <tr>
            <td style="height: 66px">&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td style="text-align: right">
              <a href="./gwc.html"><el-button>返回购物车</el-button></a>
            </td>
          </tr>
        </tbody>
      </table>
      <div class="ding_1">商品金额明细</div>
      <div class="ding_5">
        <div v-for="d1 in dz_1" :key="d1.dz_id">
          <h3>收货信息</h3>
          <li>姓名：{{ d1.dz_name }}</li>
          <li>电话：{{ d1.dz_phone }}</li>
          <li>地址：{{ d1.dz_ip }}</li>
          <li>详细地址：{{ d1.dz_xxip }}</li>
        </div>
        <div class="ding_5_1">
          <div>
            <div class="ding_5_1_2" style="display: inline">商品件数：</div>
            <span class="ding_5_1_3">&nbsp; &nbsp; {{ gwc.length }}件</span>
          </div>
          <div>
            <div class="ding_5_1_2">商品总价：</div>
            <span class="ding_5_1_3">{{ totalPrice }}元</span>
          </div>
          <div>
            <div class="ding_5_1_2">优惠价抵扣：</div>
            <span class="ding_5_1_3">&nbsp;&nbsp; -0元</span>
          </div>
          <div>
            <div class="ding_5_1_2">运费：</div>
            <span class="ding_5_1_3">&nbsp;&nbsp;&nbsp; 0元</span>
          </div>
          <div>
            <div class="ding_5_1_2">应付总额：</div>
            <span class="ding_5_1_3">{{ totalPrice }}元</span>
          </div>
        </div>
        <hr />
        <div style="text-align: right">
          <form action="http://127.0.0.1:1234/pay/alipay">
            <input type="hidden" :value="totalPrice" name="gprice" />
            <input type="hidden" :value="totalName" name="gname" />
            <input type="hidden" v-model="dd_hao" name="dd_hao" />
            <input type="hidden" v-model="mail.qq" name="gqq" />
            <button @click="DdUpdate(), GwcUpdate()">去结算</button>
          </form>
        </div>
      </div>
    </div>

    <Wei></Wei>
  </div>
</template>
<script lang="ts" setup>
import { ref, watch, computed, watchEffect } from "vue";
import { getAssetsFile } from "../assets/img";
import { useRoute } from "vue-router";
import axios from "axios";
import "../assets/css/bootstrap.css";
import Tou from "../views/tou.vue";
import Wei from "../views/wei.vue";

const route = useRoute();
const mail: any = ref({});
const dd: any = ref({});
const dz: any = ref({});
const gwc: any = ref([]);
const dz_: any = ref([]);
const dz_es: any = ref([]);
const dialogFormVisible = ref(false);
const dialogFormVisible2 = ref(false);
const ding_3_1_2Click = ref(true);
const ding_3_1_3Click = ref(false);
const ding_3_1_4Click = ref(true);
const ding_3_1_5Click = ref(false);
let dd_hao = "";
let totalPrice = 0;
let totalName = "";
const selectedIndex = ref(-1);

const dz_1: any = ref([]);
const selectItem = (index: number, id) => {
  selectedIndex.value = index;
  dz_1.value = dz_es.value.filter((f) => f.dz_id === id);
};

// 监听 mail.value.qq 的变化，更新 dz.value.dz_qq 的值
watch(mail, (newMail) => {
  dz.value.dz_qq = newMail.qq;
  dd.value.dd_qq = newMail.qq;
  dd.value.dd_hao = dd_hao;
  g.value.gqq = newMail.qq;
});

const priceNum = computed(() => {
  //总价
  for (let index = 0; index < gwc.value.length; index++) {
    totalPrice += Number(gwc.value[index].gprice * gwc.value[index].gnum);
  }
  //商品所有名
  for (let index = 0; index < gwc.value.length; index++) {
    totalName += gwc.value[index].gname + ",";
  }
});
// 监听 gwc 的变化，并在变化时执行计算属性
watchEffect(() => {
  console.log(priceNum.value);
});
gwc.value = JSON.parse(
  decodeURIComponent(window.atob(localStorage.getItem("myData1")))
);
dd_hao = JSON.parse(
  decodeURIComponent(window.atob(localStorage.getItem("myData2")))
);
/**用户*/
mail.value.qq = route.params.qq;
const Mail = () => {
  axios.get("http://127.0.0.1:1234/U/" + mail.value.qq).then((response) => {
    mail.value = response.data;
  });
};
Mail();

/**显示地址*/
const StuN = () => {
  axios.post("http://127.0.0.1:1234/Dz/search", dz.value).then((response) => {
    dz_.value = response.data;
    dz_es.value = dz_.value.filter((f) => f.dz_qq == mail.value.qq);
    console.log(dz_es.value);
  });
};
StuN();
/**添加地址*/
const add = () => {
  axios.post(`http://127.0.0.1:1234/Dz`, dz.value).then((response) => {
    if (response.data === 1) {
      history.go(0);
    }
  });
};

/**根据id获取地址信息 > 修改*/
const getDzId = (dzItem) => {
  axios.get("http://127.0.0.1:1234/Dz/" + dzItem.dz_id).then((response) => {
    dz.value = response.data;
    console.log(dz.value);
  });
};
/**修改地址*/
const DzUpdate = () => {
  axios
    .put(`http://127.0.0.1:1234/Dz/`, dz.value)
    .then((response) => {
      if (response.data === 1) {
        history.go(0);
      }
    })
    .catch((err) => {
      alert(err);
    });
};
/**UPGWC*/
const g: any = ref({});
const GwcUpdate = () => {
  g.value.gdd_hao = dd_hao;
  axios
    .put(`http://127.0.0.1:1234/G/gwc`, g.value)
    .then(() => {})
    .catch((err) => {
      alert(err);
    });
};
/**订单*/
const DdUpdate = () => {
  dd.value.dd_ip = dz_1.value[0].dz_ip;
  dd.value.dd_name = dz_1.value[0].dz_name;
  dd.value.dd_phone = dz_1.value[0].dz_phone;
  dd.value.dd_xxip = dz_1.value[0].dz_xxip;
  axios
    .put(`http://127.0.0.1:1234/Dd/dd`, dd.value)
    .then(() => {})
    .catch((err) => {
      alert(err);
    });
};
</script>
<style scoped>
@import "../assets/css/TandW.css";
@import "../assets/css/dingdan.css";
.dialog-footer button:first-child {
  margin: 30px 20px 30px 300px;
}
.dialog-footer button {
  width: 66px;
}
</style>
